 //对实时事件采用双表设计，实现对实时滚动事件的显示过滤。满足对实时滚动事件太多无法直接观察的要求。
 //时间  类型
 //对查询出来的字符串，最好使用字符串进行过滤比较好
 /*******************getfilterinformation  Method   


Gets the information about the Grid filters. The method returns an array of the applied filters. The returned information includes the filter objects and filter columns. Each filter in the Array has the following fields: 
• filter - a filter object which may contain one or more filters. 
 Properties and Methods of the filter object. ◦getfilters - returns an array of all filters in the filter object. Each filter in the Array has: ◾value - filter's value.
◾condition - filter's operator. 
         For String filter the value could be: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE', 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 
		 'STARTS_WITH_CASE_SENSITIVE', 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL.
		 For Date and Number filter the value could be: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'.
		 For Boolean filter, the value could be: 'EQUAL', 'NOT_EQUAL' 
◾type - filter's type - 'stringfilter', 'numericfilter', 'booleanfilter' or 'datefilter'.

◦operator - 'and' or 'or'. Determines the connection between the filters in the group.

• filtercolumn - the column's datafield. 
• filtercolumntext - the column's text. 
 
*******************/

 $(document).ready(function () {
	
	 
            var data = generatedata(100);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date'},
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
			
			var comumnsFilter=[
                  { text: '时间', /*columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains',*/ datafield: 'name', width: 215 },
                  {
                      text: '等级', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
				  // { text: 'Product', filtertype: 'checkedlist', filteritems: ['Black Tea', 'Green Tea', 'Caffe Latte'], datafield: 'productname'},
                  { text: '对象', datafield: 'available', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', width: 67 },
                  { text: '事件', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'yyyy-MM-dd hh:mm:ss' },
                  { text: '附加信息', datafield: 'quantity', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', cellsalign: 'right' }
                ];
				var comumnsNomal=[
                  { text: '时间',   datafield: 'name', width: 215 },
                  {
                      text: '等级',  datafield: 'productname', width: 220 },
				  
                  { text: '对象', datafield: 'available',   width: 67 },
                  { text: '事件', datafield: 'date',  width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: '附加信息', datafield: 'quantity',  cellsalign: 'right' }
                ];
             //初始化实时事件表
            $("#event-grid").jqxGrid(
            {
                width: '100%',
				height: '563',
                source: dataAdapter,
                showfilterrow: true,
				theme:"black",
				   scrollmode: 'deferred',//SCROLL by row
                filterable: true,
				showheader: false,
               // selectionmode: 'multiplecellsextended',
                columns: comumnsNomal
            });
			//初始化实时事件过滤器表
			  $("#event-grid-filter").jqxGrid(
            {
                width: '100%',
				height: '57',
				scrollbarsize: 0,
                source: dataAdapter,
                showfilterrow: true,
				theme:"black",
                filterable: true,
			
                selectionmode: 'multiplecellsextended',
                columns: comumnsFilter
            });
			//过滤器表，过滤器发送变化，更新到实时事件的过滤器中
			 $("#event-grid-filter").on("filter", function (event) {
                $('#event-grid').jqxGrid('clearfilters');
				 //1 获取filter表格中的filter
				 //1 用已经获取的filter数据，来设置event-grid中的filter
                 var filterGroups = $('#event-grid-filter').jqxGrid('getfilterinformation');
				 var info = "";
				 for (var i = 0; i < filterGroups.length; i++) {
					 var filterGroup = filterGroups[i];
					 info += "Filter Column: " + filterGroup.filtercolumn;
					 var filters = filterGroup.filter.getfilters();
					  var new_filtergroup = new $.jqx.filter(); 
					 for (var j = 0; j < filters.length; j++) {
						 info += "\nFilter: ";
						 info += "\nValue: " + filters[j].value;
						 info += "\nCondition: " + filters[j].condition;
						 info += "\nOperator: " + filters[j].operator;
					 var filtervalue =  filters[j].value;
                     var filtercondition =  filters[j].condition;
					 var new_filter= new_filtergroup.createfilter(filters[j].type, filtervalue, filtercondition);	
					 new_filtergroup.addfilter(filters[j].operator, new_filter); 
						 
					 }
				  // add the filters.
                  $("#event-grid").jqxGrid('addfilter', filterGroup.filtercolumn, new_filtergroup);      // $("#event-grid").jqxGrid('applyfilters');
				 }
				 
				/*  
				  var filtergroup = new $.jqx.filter();

                var filter_or_operator = 1;
                var filtervalue = 'Beate';
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

                filtervalue = 'Andrew';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#event-grid").jqxGrid('addfilter', 'name', filtergroup);
               */
			  alert(info);
                // apply the filters.
                $("#event-grid").jqxGrid('applyfilters');
            });
			
			//模拟实时更新事件
	var even_his=false;
	avcRealtimeDate=function(){
		     if(even_his) return;
				var rows=$('#event-grid').jqxGrid('getrows');
				if(rows.length<200)
				{
				   var datarow = generatedata(1)[0];
                    var commit = $("#event-grid").jqxGrid('addrow', null, datarow);
					var position = $('#event-grid').jqxGrid('scrollposition');


					 $('#event-grid').jqxGrid('scrolloffset', 5000, position.left);
					
				}else
				{
				 	$('#event-grid').jqxGrid('clear');
				}
	}
			
	setInterval(avcRealtimeDate, 500);
		  
    initTitleBar=function (){
	 $("#toggole-button").jqxButtonGroup({ mode: 'radio' ,theme:"black",   height: '42px'});
	 $("#toggole-button").on('buttonclick', function (event) {
                    var clickedButton = event.args.button;
                 //   $("#eventsLog").text("Clicked: " + clickedButton[0].id);
				   // alert(clickedButton[0].id);
					if(clickedButton[0].id=="event-his")//历史事件
					{
						even_his=true;
						//$('#event-grid').jqxGrid('destroy'); //destory  然后新建，filter产生的控件会一直存在？查看操作几次之后的dom树可以看到很多listbox和calendar的div
						$('#event-grid').remove();
						$("#event-grid-filter").hide();  //需要全局修改为
						$('<div id="event-grid"></div>').insertBefore("#event-grid-filter");
						$("#tool").height(32);
						
						$("#event-grid").jqxGrid(
						{
							width: '100%',
							height: '593',
							source: dataAdapter,
							//showfilterrow: true,
							theme:"black",
							   scrollmode: 'deferred',//SCROLL by row
							//filterable: true,
							showheader: true,
						   // selectionmode: 'multiplecellsextended',
							columns: comumnsNomal//comumnsFilter
						});
					}
					else  //实时事件
					{   even_his=false;
					
						//$('#event-grid').jqxGrid('destroy');
						$('#event-grid').remove();
						$("#event-grid-filter").show();
						$('<div id="event-grid"></div>').insertAfter("#event-grid-filter");
						$("#tool").height(0);
						
						$("#event-grid").jqxGrid(
						{
							width: '100%',
							height: '563',
							source: dataAdapter,
							//showfilterrow: true,
							theme:"black",
							scrollmode: 'deferred',//SCROLL by row
							//filterable: true,
							showheader: false,
						   // selectionmode: 'multiplecellsextended',
							columns: comumnsNomal
						});
					}
                });
	}		
	
	 initTitleBar();  
        });
